<template>
	<view>
		<cmd-nav-bar back title="系统设置"></cmd-nav-bar>
		<cmd-page-body type="top">
			<cmd-transition name="fade-up">
				<view class="forgot">
					<view class="forgot-phone">
						<cmd-input v-model="mobile.url" maxlength="100" type="text" placeholder="请输入URL"
							@input="onInput"></cmd-input>
						<view class="forgot-phone-getcode" @tap="clickUpdate()">热更新</view>
					</view>
					<button class="btn-forgot btn-forgot-active" hover-class="btn-forgot-hover"
						@click="setURL()">设置url</button>
				</view>
			</cmd-transition>
		</cmd-page-body>
	</view>
</template>

<script>
	import cmdNavBar from "@/components/cmd-nav-bar/cmd-nav-bar.vue"
	import cmdPageBody from "@/components/cmd-page-body/cmd-page-body.vue"
	import cmdTransition from "@/components/cmd-transition/cmd-transition.vue"
	import cmdInput from "@/components/cmd-input/cmd-input.vue"

	export default {
		components: {
			cmdNavBar,
			cmdPageBody,
			cmdTransition,
			cmdInput
		},

		data() {
			return {
				mobile: {
					phone: '',
					url: '',
					passwordOne: '',
					passwordTwo: ''
				},
				passwordReg: /^\w+$/,
				phoneReg: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
				safety: {
					time: 60,
					state: false,
					interval: ''
				},
				forgotMobile: false
			};
		},

		watch: {
			/**
			 * 监听表单数值
			 */
			mobile: {
				handler(newValue) {
					if (this.phoneReg.test(newValue.phone) && newValue.code.length == 6 && newValue.passwordOne.length >=
						8 &&
						newValue.passwordOne == newValue.passwordTwo) {
						this.forgotMobile = true;
					} else {
						this.forgotMobile = false;
					}
				},
				deep: true
			}
		},

		methods: {
			onInput(e) {
				this.mobile.url = e;
			},
			setURL() {
				this.mobile.url = "http://192.168.2.105/apk/__UNI__61C5095.wgt";
			},
			clickUpdate() {
				console.log(this.mobile.url);
				let updateWgtUrl = this.mobile.url;
				if (!updateWgtUrl) {
					uni.showToast({
						title: "请输入url",
						icon: "none"
					});
					return;
				}
				console.log("url", updateWgtUrl);
				this.beforeExport();
				// 更新文件 wgt 文件地址
				plus.nativeUI.showWaiting('正在更新...'); // 打开系统等待对话框
				uni.downloadFile({
					url: updateWgtUrl,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							plus.nativeUI.showWaiting('安装文件...');
							plus.runtime.install(downloadResult.tempFilePath, {
								force: false
							}, function() {
								plus.nativeUI.closeWaiting();
								console.log('install success...');
								plus.runtime.restart();
							}, function(e) {
								plus.nativeUI.closeWaiting();
								console.error('install fail...', e);
								uni.showToast({
									title: e.message,
									icon: 'none'
								});
							});
						}
					},
				});
			},
			installWgt(path) {
				console.log("installWgt", path);
				// 安装wgt方法
				plus.nativeUI.showWaiting('安装文件...');
				plus.runtime.install(
					path, {
						force: true
					},
					function() {
						plus.nativeUI.closeWaiting();
						plus.nativeUI.alert('应用资源更新完成！', function() {
							plus.runtime.restart(); // 重启APP
						});
					},
					function(e) {
						plus.nativeUI.closeWaiting();
					}
				);
			},
			beforeExport() {
				// 判断有没有存储权限
				var _this = this
				plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'], function(e) {
					if (e.deniedAlways.length > 0) { //权限被永久拒绝
						// 弹出提示框解释为何需要读写手机储存权限，引导用户打开设置页面开启
						uni.showModal({
							title: '存储权限',
							content: '您拒绝了存储权限，请前往设置-应用开启存储权限。',
							success: function(res) {
								if (res.confirm) {
									// console.log('用户点击确定');
								} else if (res.cancel) {
									// console.log('用户点击取消');
								}
							}
						});
					}
					if (e.deniedPresent.length > 0) { //权限被临时拒绝
						// 弹出提示框解释为何需要读写手机储存权限，可再次调用plus.android.requestPermissions申请权限
						plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'])

					}
					if (e.granted.length > 0) { //权限被允许
						//调用依赖获取读写手机储存权限的代码
						_this.exportFile()
					}
				}, function(e) {

				});
			},
			/**
			 * 提交按钮点击执行
			 */
			fnForgot() {
				console.log(JSON.stringify(this.mobile));
			},
			/**
			 * 获取验证码
			 */
			fnGetPhoneCode() {
				if (this.phoneReg.test(this.mobile.phone)) {
					uni.showToast({
						title: "正在发送验证码",
						icon: "loading",
						success: () => {
							// 成功后显示倒计时60s后可在点击
							this.safety.state = true;
							// 倒计时
							this.safety.interval = setInterval(() => {
								if (this.safety.time-- <= 0) {
									this.safety.time = 60;
									this.safety.state = false;
									clearInterval(this.safety.interval);
								}
							}, 1000);
							uni.showToast({
								title: "发送成功",
								icon: "success"
							})
						}
					})
				} else {
					uni.showToast({
						title: "手机号不正确",
						icon: "none"
					})
				}
			}
		},

		beforeDestroy() {
			/**
			 * 关闭页面清除轮询器
			 */
			clearInterval(this.safety.interval);
		}
	}
</script>

<style>
	.forgot {
		margin-top: 118upx;
		margin-right: 72upx;
		margin-left: 72upx;
	}

	.forgot-phone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx #dedede solid;
		margin-top: 118upx;
		margin-bottom: 40upx;
	}

	.forgot-phone-getcode {
		color: #3F51B5;
		text-align: center;
		min-width: 140upx;
	}

	.forgot-password,
	.forgot-code {
		margin-bottom: 40upx;
		border-bottom: 2upx #dedede solid;
	}

	.btn-forgot {
		margin-top: 100upx;
		border-radius: 50upx;
		font-size: 16px;
		color: #fff;
		background: linear-gradient(to right, #88a1f9, #9ac6ff);
	}

	.btn-forgot-active {
		background: linear-gradient(to right, #365fff, #36bbff);
	}

	.btn-forgot-hover {
		background: linear-gradient(to right, #365fdd, #36bbfa);
	}

	button[disabled] {
		color: #fff;
	}
</style>